<template>
    <div>
        <div class="p-4">
            <el-form :inline="true" :model="searchParams" class="demo-form-inline">
                <el-form-item label="关键字搜索">
                    <el-input v-model="searchParams.nameKeyword" placeholder="关键字" clearable />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="getList">搜索</el-button>
                </el-form-item>
            </el-form>
            <div class="mt-3">
                <el-button type="primary" icon="Plus" @click="add">新增</el-button>
                <!-- <el-button type="danger" icon="Delete" @click="bachRemove">删除</el-button> -->
            </div>
            <div class="mt-3">
                <el-table ref="tableRef" :data="data" fit border style="width: 100%" row-key="id"
                    @row-click="handleRowClick" @selection-change="handleSelectionChange"
                    :row-class-name="getTableRowClassName">
                    <el-table-column align="center" type="selection" width="55" />
                    <el-table-column align="center" type="index" :index="indexMethod" label="序号" width="60" />

                    <!-- <el-table-column align="center" fit label="接收人" prop="userId" sortable /> -->

                    <el-table-column align="center" fit label="标题" prop="title" sortable />

                    <el-table-column align="center" fit label="消息内容" prop="content" />

                    <el-table-column align="center" fit label="接收时间" prop="createTime" sortable />

                    <el-table-column fixed="right" fit align="center" label="操作">
                        <template #default="scope">
                            <el-button link type="primary" size="small" @click="edit(scope.row)">查看</el-button>
                            <el-button link type="primary" size="small" @click="edit(scope.row)">编辑</el-button>
                            <el-button link type="danger" size="small" @click="del(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="mt-3">
                <el-pagination v-model:current-page="searchParams.pageNumber" v-model:page-size="searchParams.pageSize"
                    :page-sizes="[10, 20, 30, 50]" :background="background"
                    layout="total, sizes, prev, pager, next, jumper" :total="totalRow" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange" />
            </div>
        </div>

        <!-- 添加与编辑 -->
        <el-dialog v-model="addDialog" :title="isAdd ? '添加' : '编辑'" width="60%" center>

            <!-- 编辑表单信息 -->
            <el-form label-width="auto" ref="editItemRef" :model="editItem" :rules="editItemRules" class="demo-ruleForm"
                status-icon>


                <el-form-item label="接收人" prop="userId">
                    <el-input placeholder="请输入接收人" v-model="editItem.userId"></el-input>
                </el-form-item>

                <el-form-item label="类型： 1.系统消息 2.公告提醒" prop="kind">
                    <el-input placeholder="请输入类型： 1.系统消息 2.公告提醒" v-model="editItem.kind"></el-input>
                </el-form-item>

                <el-form-item label="关联ID" prop="rellId">
                    <el-input placeholder="请输入关联ID" v-model="editItem.rellId"></el-input>
                </el-form-item>

                <el-form-item label="标题" prop="title">
                    <el-input placeholder="请输入标题" v-model="editItem.title"></el-input>
                </el-form-item>

                <el-form-item label="消息内容" prop="content">
                    <el-input placeholder="请输入消息内容" v-model="editItem.content"></el-input>
                </el-form-item>


            </el-form>

            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="addDialog = false">取消</el-button>
                    <el-button type="primary" @click="save(editItemRef)">保存</el-button>
                </div>
            </template>
        </el-dialog>


        <!-- 操作提示弹框 -->
        <el-dialog v-model="openDialog" title="操作提示" width="40%" center>
            <span class="m-t-10 m-b-10">{{ openDialogTitle }}</span>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="openDialog = false">取消</el-button>
                    <el-button type="primary" @click="confirm">确认</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>


<script setup>
import { indexMethod } from '@/config/utils';
import { ref } from 'vue';
import { } from '@/config/api.js'

//搜索条件
const totalRow = ref(0)
const searchParams = ref({
    pageNumber: 1,
    pageSize: 10
})

//表格数据
const tableRef = ref()
const data = ref([])

//选择的行
const selectedRow = ref({})
//单击行
const handleRowClick = (row) => {
    console.log('row ==> {}', row);
    selectedRow.value = row
    tableRef.value.clearSelection()
    tableRef.value.toggleRowSelection(row)
}
//设置行样式
const getTableRowClassName = ({ row }) => {
    if (row.id === selectedRow.value.id) {
        return 'tableRowStyle'
    }
    return ''
}
//获取列表数据
function getList() {
    //执行查询数据
    getDeptList(searchParams.value).then(res => {
        if (res.code == 200) {
            data.value = res.data.records
            totalRow.value = res.data.totalRow
        }
    })
}

//分页参数处理
const handleSizeChange = (e) => {
    searchParams.value.pageSize = e
    getList()
}
const handleCurrentChange = (e) => {
    searchParams.value.pageNumber = e
    getList()
}
getList();

//校验规则
const checkName = (rule, value, callback) => {
    if (!value || value === '') {
        callback(new Error('部门名称必填'))
    } else {
        //kind: 1.系统管理员添加店铺主账号 2.店铺自主注册 3.店铺添加员工
        let data = {
            deptName: value,
            id: editItem.value.id
        }
        checkDeptName(data).then(res => {
            if (res.code == 200) {
                callback()
            }
            else {
                callback(new Error(res.msg))
            }
        })
    }
}

//添加与编辑
const editItem = ref({})
const addDialog = ref(false)
const editItemRef = ref()

//表单校验
const editItemRules = ref({
    deptName: [
        { required: true, message: '部门名称必填', trigger: 'blur' },
        { validator: checkName, trigger: 'blur' }
    ],
})

//打开操作页面
const isAdd = ref(true)

//添加
const add = async () => {
    editItem.value = {}
    addDialog.value = true
}
//编辑
const edit = async (item) => {
    addDialog.value = true
    editItem.value = item
}

//保存信息
const save = (itemRef) => {
    if (!itemRef) return
    itemRef.validate((valid) => {
        if (valid) {
            ElMessage.success('添加成功')
            // saveDept(editItem.value).then(res => {
            //     if (res.code == 200) {
            //         addDialog.value = false
            //         ElMessage.success('添加成功')
            //         getList();
            //     }
            // })
        } else {
            ElMessage.error('表单校验未通过')
        }
    })
}



//删除
const openKind = ref({})
const openDialog = ref(false)
const openDialogTitle = ref('')
const openItem = ref({})
//单条删除
const del = (item) => {
    openDialog.value = true
    openKind.value = 1
    openDialogTitle.value = "确认要删除：" + item.deptName + " ?"
    openItem.value = item
}
//批量删除
const bachRemove = () => {
    const list = tableRef.value.getSelectionRows();
    console.log('选中的数据 ==> {}', list);
    if (list.length <= 0) {
        ElMessage.error('请先选择要操作的数据')
        return
    }
    openDialog.value = true
    openKind.value = 2
    openDialogTitle.value = "确认要删除选中的行？"
}

//提交确认信息
const confirm = () => {
    if (openKind.value == 1) {
        console.log('删除了 ==> {}', openItem.value.id);
        delDept(openItem.value).then(res => {
            if (res.code == 200) {
                openDialog.value = false
                ElMessage.success(res.msg)
                getList();
            }
            else {
                ElMessage.error(res.msg)
            }
        })
    }
    else if (openKind.value == 2) {
        const list = tableRef.value.getSelectionRows();
        const ids = list.map(item => item.id);
        // const names = list.map(item => item.roleName);
        // console.log('执行批量删除 ==> {}', ids);
        // console.log('执行批量删除 ==> {}', names);
        let data = {
            ids: ids
        }
        delDept(data).then(res => {
            if (res.code == 200) {
                openDialog.value = false
                ElMessage.success(res.msg)
                getList();
            }
            else {
                ElMessage.error(res.msg)
            }
        })
    }
    openDialog.value = false
}
</script>

<style scoped></style>